import link from './myrouter/link'
let Vue = null;
function install(_vue){
  Vue = _vue;
  Vue.mixin({
    beforeCreate() {
      if(this.$options.router){
        this.$router = this.$options.router
      }else if(this.$parent){
        this.$router = this.$parent.$router
      }
    },
  })
  Vue.component('router-link',link)
  Vue.component('router-view',{
    render(h){
      // this是组件 不是router实例
      // debugger
      return h(this.$router.routerMap[this.$router._route])
    }
  })
}
class VueRouter{
  constructor(options){
    let {routes} = options;
    this.routerMap = {};// 这里想要存放的是 路径和组件的一一对应关系
    routes.forEach(item=>{
      this.routerMap[item.path] = item.component;
    })
    // 需要获取当前的路经
    this._route = location.hash.match(/#([^?]+)/)[1]
    // 每当hash发生改版的时候 我们 都要更新这个值
    window.addEventListener('hashchange',()=>{
      this._route = location.hash.match(/#([^?]+)/)[1]
    })
    Vue.util.defineReactive(this,'_route','/')// 利用了 VUE中的实现响应式的一个方法 解决响应式
    window.addEventListener('load',()=>{
      location.hash = location.hash || '/';
      this._route = location.hash.match(/#([^?]+)/)[1]
    })
  }
}

VueRouter.install = install;
export default VueRouter